<template>
	<view class="container">
		<view class="view">
			<view class="tui-category" hover-class="opcity" :hover-stay-time="150">
				<tui-icon name="position" color="#fff" :size="44" unit="rpx"></tui-icon>
				<view class="tui-category-scale">{{city}}</view>
			</view>
			<view class="tui-rolling-search">
				<!-- <view class="tui-search-input" @tap="search">
					<icon type="search" :size="13" color="#999"></icon>
					<text class="tui-search-text">搜索店铺</text>
				</view> -->
				<!-- <tui-icon name="search-2" :size="32" unit="rpx"></tui-icon>
				<swiper vertical autoplay circular interval="8000" class="tui-swiper">
					<swiper-item v-for="(item, index) in hotSearch" :key="index" class="tui-swiper-item" @tap="search">
						<view class="tui-hot-item">{{ item }}</view>
					</swiper-item>
				</swiper> -->
				<view class="tui-search-input">
					<icon type="search" :size='13' color='#333'></icon>
					<input confirm-type="search" placeholder="搜索店铺" :focus="true" auto-focus
						placeholder-class="tui-input-plholder" class="tui-input" v-model.trim="key" @input="inputKey" />
					<icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="key"></icon>
				</view>
			</view>
		</view>
		<!--header-->

		<view class="view-banner">
			<view class="tui-banner-bg">
				<view class="tui-primary-bg tui-route-left"></view>
				<view class="tui-primary-bg tui-route-right"></view>

				<view class="tui-banner-box">
					<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150"
						class="tui-banner-swiper" :circular="true" indicator-color="rgba(255, 255, 255, 0.8)"
						indicator-active-color="#fff">
						<swiper-item v-for="(item, index) in banner" :key="index">
							<image :src="item.adv_image" class="tui-slide-image" mode="widthFix" />
						</swiper-item>

					</swiper>
				</view>
			</view>
		</view>

		<view class="yy-box">
			<view class="yy-box-item" v-for="(item, index) in shopDatas" :key="index" @tap="detail(item.shop_id)"
				v-if="shopDatas">
				<view class="item-pic">
					<view class="item-pic-block">
						<image :src="item.shop_avatar" class="item-pic-block" mode="scaleToFill" />
						</image>
					</view>
				</view>
				<view class="item-info">
					<view class="item-title">
						{{item.shop_name}}
					</view>
					<view class="item-time">
						<image src="/static/images/common/clicks.png" mode="widthFix" class="item-time-click"></image>
						<text class="itme-time-text">营业时间:{{item.shop_workingtime}}</text>
					</view>
					<view class="item-locat-info">
						<image src="/static/images/common/location.png" mode="widthFix" class="item-locat-info-icon">
						</image>
						<text class="">{{item.distance}}</text>
					</view>
					<view class="item-locations">
						<view class="adress">
							<view class="address-info">
								{{item.shop_address}}
							</view>
						</view>
					</view>
					<view class="tag">
						<view class="tag-btns">
							<image src="/static/images/common/tags.png" mode="widthFix" class="tag-btns-icon"></image>
							<text>分润值赠送比例{{item.give_point_proportion}}</text>
						</view>
					</view>

				</view>
			</view>

		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="grey"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<view v-if="shopDatas==''">
			<tui-no-data :fixed="false" imgUrl="/static/images/nodata/error.png">暂无数据</tui-no-data>
		</view>
	</view>
</template>
<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				current: 0,
				key: '',
				hotSearch: [],
				banner: [],
				city: '贵阳',
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				shopDatas: '',
				latitude: '',
				joingTrades: "",
				longitude: '',
				jointrader: false,

			};
		},
		onShow() {

			// #ifndef MP-WEIXIN
			this.tui.haslogin();
			if (this.tui.isLogin()) {

			}
			// #endif
			this.init();
			this.maps();
		},
		methods: {
			maps() {

				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						let _this = this;
						let latitude, longitude;
						latitude = res.latitude.toString();

						longitude = res.longitude.toString();
						this.longitude = longitude;
						this.latitude = latitude;

						if (this.longitude && this.latitude) {
							this.inits('');
							uni.request({
								header: {
									"Content-Type": "application/text"
								},
								url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude +
									',' + longitude + '&key=NY4BZ-OPJ3I-4CEGA-U7KI6-NRYGK-7PFV3',
								success(re) {
									console.log(re)
									_this.city = re.data.result.address_component.city;
								}
							});
						}

					},
					fail: (err) => {
						if (err.errMsg.indexOf("auth deny") >= 0) {
							this.tui.toast("访问位置被拒绝");
						} else {
							this.tui.toast(err.errMsg);
						}

					}
				})
			},
			inputKey: function(e) {
				console.log(this.key)
				this.pageIndex = 1;
				this.key = util.trim(e.detail.value);
				this.inits(this.key)
				
			},
			cleanKey: function() {
				this.key = ''
				this.pageIndex = 1;
				this.inits(this.key)
			},
			init() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					ap_id: 6674
				};
				//banner 
				let banner = this.tui.request('goods', 'post', datas, 1000, 1, '', 'ads');
				Promise.resolve(banner).then((value) => {
					if (value.code == 200) {
						this.banner = value.data;
					} else {
						this.tui.toast(value.message);
					}
				})


			},
			inits(search_text) {
				this.loadding = true;
				let token = this.tui.getToken();
				let latitude_longitude = this.latitude + ',' + this.longitude;
				let joingTradedatas = {
					token: token,
					search_text: search_text,
					limit: 5,
					page: this.pageIndex,
					latitude_longitude: latitude_longitude
				};

				let joingTrade = this.tui.request('shop', 'post', joingTradedatas, 1000, 1, '', 'peripheralList');
				Promise.resolve(joingTrade).then((value) => {
					if (value.code == 200) {
						if (value.data.data) {
							this.shopDatas = value.data.data;
							this.pageIndex = this.pageIndex + 1;
						}
						this.loadding = false;
					}
				})
			},
			treaty: function() {
				uni.navigateTo({
					url: '/pageschild/franchisee/treaty'
				});
			},
			apply() {
				uni.navigateTo({
					url: '/pageschild/franchisee/apply'
				});
			},
			applys() {
				if (this.joingTrades.is_poundage == 0) {
					uni.navigateTo({
						url: '/pageschild/franchisee/applys'
					});
				} else {
					uni.navigateTo({
						url: '/pageschild/user/merchant'
					});
				}

			},
			detail: function(shop_id) {
				uni.navigateTo({
					url: '/pageschild/shop/store?shop_id=' + shop_id
				});
				// uni.openLocation({
				// 	longitude: Number(data.latitude),
				// 	latitude: Number(data.longitude),
				// 	name: data.shop_name,
				// 	address: data.address
				// })
			},

			search: function() {
				uni.navigateTo({
					url: '../search/search'
				});
			}
		},
		onPullDownRefresh: function() {
			let loadData = JSON.parse(JSON.stringify(this.productList));
			loadData = loadData.splice(0, 10);
			this.productList = loadData;
			this.pageIndex = 1;
			this.pullUpOn = true;
			this.loadding = false;
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			let latitude_longitude = this.latitude + ',' + this.longitude;
			// console.log(this.pageIndex)
			let token = this.tui.getToken();
			let joingTradedatas = {
				token: token,
				limit: 5,
				page: this.pageIndex,
				latitude_longitude: latitude_longitude
			};
			let joingTrade = this.tui.request('shop', 'post', joingTradedatas, 1000, 1, '', 'peripheralList');
			Promise.resolve(joingTrade).then((value) => {
				if (value.code == 200) {
					if (value.data.data) {
						this.shopDatas = this.shopDatas.concat(value.data.data);
						this.pageIndex = this.pageIndex + 1;
					}

					this.loadding = false;
				}

			})

		}
	};
</script>
<style>
	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 100rpx;
		color: #333;
	}

	/*tabbar*/
	.tui-tabbar {
		width: 100%;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99999;
		background: #fff;
		height: 100rpx;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.yy-box {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		margin-top: -4rpx;
		z-index: 10;
		background: #f7f7f7;
		padding: 140rpx 20rpx 30rpx 20rpx;
	}

	.tui-activity-box {

		/* padding:0 40rpx; */
	}

	.yy-box-item {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		margin-bottom: 20rpx;
		/* align-items: center; */
		width: 100%;
		box-sizing: border-box;
	}

	.yy-box-item .item-pic {
		width: 240rpx;
		/* height:220rpx; */
		/* background:#f6bf10; */
		border-radius: 24rpx;
		margin-right: 20rpx;
	}

	.item-locat-info {
		position: absolute;
		right: 0rpx;
		display: flex;

		top: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		color: #a7a7a7;
	}

	.item-locat-info-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 2rpx;
	}

	.item-time {
		color: #707070;
		font-size: 26rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: left;
		line-height: 30rpx;
	}

	.item-time-click {
		margin-right: 4rpx;
		width: 8.2%;
		height: 20rpx;
	}

	.itme-time-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.item-pic-block {
		width: 200rpx;
		border-radius: 24rpx;
		height: 200rpx;
		display: block;
	}

	.yy-box-item .item-info {
		width: 100%;
		position: relative;
		flex-direction: column;
	}

	.yy-box-item .item-info .tag {
		display: flex;
		align-items: center;
		justify-content: left;
		font-size: 22rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.adress {
		display: flex;
		align-items: center;
		width: 70%;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.address-info {
		width: 100%;
		word-break: break-all;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		color: #afafaf;
	}

	.distance {}

	.htos-tag {
		border-radius: 8rpx;
		padding: 4rpx;
		margin-right: 10rpx;
		color: #f3532d;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-locations {
		font-size: 24rpx;
		color: #757473;
		margin-bottom: 10rpx;
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;
		/* 	align-items: center;
	justify-content:left; */
	}

	.tag-btns {
		background-image: linear-gradient(to bottom right, #ff6948, #ff3e2b);
		padding: 6rpx 10rpx;
		border-radius: 10rpx;
		color: #fff;
		line-height: 40rpx;
		margin-right: 10rpx;
		display: flex;
		justify-content: left;
	}

	.tag-btns-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.icons {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.item-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: left;
	}

	.hots {
		display: flex;
		align-items: center;
		justify-content: left;
		font-size: 22rpx;
		color: #f6bf10
	}

	.icons-star {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-tabbar-item {
		flex: 1;
		width: 25%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 24rpx;
		color: #666;
		height: 80rpx;
	}

	.tui-ptop-4 {
		padding-top: 4rpx;
	}

	.tui-scale {
		font-weight: bold;
		transform: scale(0.8);
		transform-origin: center 100%;
		line-height: 30rpx;
	}

	.tui-item-active {
		color: #e41f19 !important;
	}

	/*tabbar*/
	.view {
		width: 100%;
		height: 100rpx;
		padding: 0 48rpx 0 16rpx;
		box-sizing: border-box;
		background: linear-gradient(to right, #ff6811, #ff1505);
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}

	.tui-rolling-search {
		width: 86%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-category {
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		/* flex-direction: column; */
		margin: 0;
		margin-right: 22rpx;
		flex-shrink: 0;
	}

	.tui-category-scale {
		transform: scale(0.7);
		line-height: 24rpx;
		display: flex;
		font-size: 34rpx;
	}

	.tui-icon-category {
		line-height: 20px !important;
		margin-bottom: 0 !important;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.view-banner {
		padding-top: 10rpx;
		box-sizing: border-box;
		background: linear-gradient(to right, #ff6811, #ff1505);
	}

	.tui-hot-search {
		color: #fff;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
	}

	.tui-hot-tag {
		background-color: rgba(255, 255, 255, 0.15);
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 24rpx;
	}

	.tui-banner-bg {
		display: flex;
		height: 180rpx;
		/* background-color: #e41f19; */
		position: relative;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 224rpx;
		/* border: 1px solid transparent; */
		position: relative;
		z-index: 1;
		/* background: linear-gradient(to right, #ff6811, #ff1505); */
	}


	.tui-banner-box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: absolute;
		/* overflow: hidden; */
		z-index: 99;
		bottom: -80rpx;
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 220rpx;
		border-radius: 20rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.tui-slide-image {
		width: 100%;
		height: 220rpx;
		display: block;
		z-index: 100;
	}

	/* #ifdef MP-WEIXIN */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background-color: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background-color: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background-color: #fff;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	.tui-product-category {
		background-color: #fff;
		padding: 80rpx 20rpx 30rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #555;
		margin-bottom: 20rpx;
	}

	.tui-category-item {
		width: 20%;
		height: 118rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 30rpx;
	}

	.tui-category-img {
		height: 80rpx;
		width: 80rpx;
		display: block;
	}

	.tui-category-name {
		line-height: 24rpx;
	}

	.tui-product-box {
		margin-top: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.tui-pb-20 {
		padding-bottom: 20rpx;
	}

	.tui-bg-white {
		background-color: #fff;
	}

	.tui-group-name {
		width: 100%;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		padding: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-activity-box {
		display: flex;
		background: #f6bf10;
		padding: 10rpx 30rpx;
		/* border-radius: 12rpx; */
		overflow: hidden;
	}

	.tui-activity-img {
		width: 100%;
		border-radius: 14rpx;
		display: block;
	}

	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 200rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12rpx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 24rpx;
	}

	.tui-new-title {
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-new-price {
		padding-top: 18rpx;
	}

	.tui-new-present {
		color: #ff201f;
		font-weight: bold;
	}

	.tui-new-original {
		display: inline-block;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-new-img {
		width: 160rpx;
		height: 160rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-new-label {
		width: 56rpx;
		height: 56rpx;
		border-top-left-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding-top: 20rpx; */
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}



	.tui-search-text {
		padding-left: 16rpx;
	}

	.tui-search-input {
		width: 100%;
		height: 66rpx;
		border-radius: 35rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		/* background: #f2f2f2; */
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}
	.tui-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}
	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}
</style>